<!--
 * @Date: 2024-12-13 09:25:27
 * @Author: LiSong
 * @LastEditors: g05047
 * @LastEditTime: 2025-02-26 16:59:58
 * @Description: 
-->
<template>
  <HpDialog ref="dialogRef"
    v-model="dialogState.visible"
    title="饼状数据集编辑"
    width="80%"
    height="80%"
    class="dbsource-dialog"
    :appendToBody="false"
    @close="handleCancel"
    @confirm="handleConfirm">
    <div class="dbsource-dialog-body">
      <keep-alive>
        <RkTable ref="tableRef"
          :="tableAttrs">
          <template #toolbar_right>
          </template>
          <template #color="{ row, column }">
            <HpInputColor v-model="row[column.field]" />
          </template>
          <template #select_routes="{ row, column }">
            <HpInputRoutes clearable
              filterable
              v-model="row[column.field]" />
          </template>
          <template #input="{ row, column }">
            <HpInput v-model="row[column.field]"
              placeholder="?a=xxx&b=xxx" />
          </template>
        </RkTable>
      </keep-alive>
    </div>
  </HpDialog>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'
import RkTable from '@/components/rk-table';
import { pluginManager } from '@hp/utils/pluginManager.js'



const HpInput = pluginManager.attrEditors['input']
const HpInputColor = pluginManager.attrEditors['input-color']
const HpInputRoutes = pluginManager.attrEditors['input-routes']

const props = defineProps({
  // 数据集
  modelData: { type: [Array] },
  // echarts 配置
  schema: { type: Object },
  // 结构配置
  config: { type: Object },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})
// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})
//默认
const defaultColumns = reactive([
  { field: 'name', title: '名称', sortable: false, width: 150 },
  { field: 'value', title: '值', sortable: false, width: 150, align: 'center' },
  { field: 'color', title: '颜色', sortable: false, width: 180, slots: { default: 'color' } },
  { field: 'path', title: '跳转路径', width: 250, sortable: false, slots: { default: 'select_routes' } },
  { field: 'params', title: '参数', sortable: false, slots: { default: 'input' } },
])
const tableRef = ref(null);
let tableColumns = reactive([]);
/**
 * 表格数据
 */
const tableData = computed(() => {
  const { color, pathList } = props.schema
  // 颜色配置
  return props.modelData && props.modelData.length > 0 && props.modelData.map((item, index) => {
    return {
      ...item,
      color: color[index] || undefined,
      path: pathList && pathList[index] && pathList[index].path || undefined,
      params: pathList && pathList[index] && pathList[index].params || undefined,
    }
  }) || []
})
/**
 * 表格配置属性
 */
const tableAttrs = reactive({
  data: tableData.value || [],
  keyField: 'id',
  boxConfig: false,
  pagerConfig: false,
  toolbarConfig: { refresh: false },
  sortable: false,
  columns: tableColumns
})
const dataSource = computed(() => {
  return tableRef.value.getData()
})
/** 加载表格字段 */
let loadColumns = (configData) => {
  defaultColumns.forEach(row => {
    if (Object.keys(configData).includes(row.field)) {
      tableColumns.push(row)
    }
  })
}
/**
 * 弹框取消
 */
const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
/**
 * 弹框确认
 */
const handleConfirm = () => {
  if (props.onConfirm) { props.onConfirm(dataSource.value) }
  handleDestory()
}
/**
 * 销毁弹窗
 */
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

onMounted(() => {
  // 初始化表格数据
  loadColumns(props.config.compProps.configData);
})

</script>

<style lang="scss" scoped>
.dbsource-dialog-body {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	padding: 0 18px;
}
</style>
<style lang="scss">
.dbsource-dialog {
	.hp-dialog-body {
		padding: 18px 0 !important;
	}
	.el-form-item,
	.source-code-panel {
		margin-bottom: 10px;
	}
	.source-view-item {
		margin-bottom: 5px;
	}
}
</style>